<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="df aic">
        <span class="fwb">任务看板</span>
        <div class="ml-auto df aic">
          <el-tabs class="mr20" v-model="type" type="card" @tab-click="handleClick">
            <el-tab-pane label="昨日" name="1"></el-tab-pane>
            <el-tab-pane label="今日" name="2"></el-tab-pane>
            <el-tab-pane label="近7日" name="3"></el-tab-pane>
            <el-tab-pane label="本月" name="4"></el-tab-pane>
          </el-tabs>
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            @change="handleClick"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </div>
      <!-- 数据看板 -->
      <Board :countData="countData"></Board>
    </el-card>
    <el-card class="mt20">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="任务名称" prop="taskTitle">
          <el-input
            v-model="queryParams.taskTitle"
            placeholder="请输入任务名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="发布人" prop="createByName	">
          <el-input
            v-model="queryParams.createByName	"
            placeholder="请输入发布人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="协作人" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入协作人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="筛选时间" prop="staskRange">
          <el-date-picker
            v-model="staskRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="22" v-loading="loading">
      <el-col :span="6">
        <el-tabs v-model="activeTask" @tab-click="handleTask">
          <el-tab-pane label="全部" name="1"></el-tab-pane>
          <el-tab-pane label="进行中" name="2"></el-tab-pane>
          <el-tab-pane :label="`已延期(${numData[3]})`" name="3"></el-tab-pane>
          <el-tab-pane label="已完成" name="4"></el-tab-pane>
        </el-tabs>
        <TaskListBox
          ref="taskListBox"
          :taskList="taskList"
          style="height:800px;overflow:auto"
          @changeDetails="getDetails"
          v-infinite-scroll="getList"
        ></TaskListBox>
      </el-col>
      <el-col :span="18">
        <TaskDetail :info="itemInfo"></TaskDetail>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Board from "./components/Board";
import TaskListBox from "./components/TaskList";
import TaskDetail from "./components/TaskDetail";
import { dataCount, listNum, sTaskDetails, sTaskList } from "@/api/task";
export default {
  name: "TaskList",
  components: { Board, TaskListBox, TaskDetail },
  data() {
    return {
      tableData: [],
      dateRange: null,
      staskRange: [],
      value1: 3,
      taskList: [],
      total: 0,
      loading: false,
      // 查询参数ygt
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      loadStatus: "loadmore",
      activeTask: "1",
      itemInfo: {},
      type: "1",
      countData: {},
      numData: {
        2: 0,
        3: 0
      }
    };
  },
  created() {
    this.getList();
    this.getDataCount();
    this.listNumFn();
  },
  methods: {
    handleClick() {
      this.getDataCount();
    },
    listNumFn() {
      listNum().then(res => {
        if (res.code == 200) {
          this.numData = res.data;
        }
      });
    },
    getDataCount() {
      dataCount({
        type: this.type,
        startTime: this.dateRange ? this.dateRange[0] : "",
        endTime: this.dateRange ? this.dateRange[1] : ""
      }).then(res => {
        if (res.code == 200) {
          this.countData = res.data;
        }
      });
    },
    getDetails(item) {
      this.loading = true;
      sTaskDetails(item.staskId).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.itemInfo = res.data;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.taskList = [];
      this.itemInfo = {};
      this.queryParams.pageNum = 1;
      this.loadStatus = "loadmore";
      this.getList();
    },
    handleTask() {
      this.taskList = [];
      this.itemInfo = {};
      this.queryParams.antAppIndex = this.activeTask;
      this.$refs.taskListBox.selectFlag = "";
      this.handleQuery();
    },
    async getList() {
      if (this.loadStatus == "nomore" || this.loadStatus == "loading") return;
      this.loadStatus = "loading";
      this.loading = true;
      this.queryParams.startTime = this.staskRange ? this.staskRange[0] : "";
      this.queryParams.endTime = this.staskRange ? this.staskRange[1] : "";
      sTaskList(this.queryParams).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.taskList.push(...res.rows);
          this.queryParams.pageNum = ++this.queryParams.pageNum;
          this.total = res.total;

          if (res.rows.length < this.queryParams.pageSize) {
            this.loadStatus = "nomore"; //
          } else {
            this.loadStatus = "loadmore"; //
          }
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.taskList = [];
      this.loadStatus = "loadmore";
      this.staskRange = [];
      this.queryParams.pageNum = 1;
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

<style lang="less" scoped>
::v-deep .el-tabs__header {
  margin: 0 !important;
}
</style>
